<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.7.6/css/layui.css">
    <script src="/webjars/layui/2.7.6/layui.js"></script>
</head>
<style>
    h1 {
        text-align: center;
    }

    .registerFormDiv {
        width: 35%;
        margin: 10% auto;
        border: 1px solid black;
        padding: 20px;
        box-shadow: 10px 10px 10px 10px #888888;
    }
</style>
<body>
<div class="registerFormDiv">
    <h1>注册</h1>
    <form class="layui-form" action="" enctype="multipart/form-data" id="registerForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="pass" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input" id="username">
            </div>
            <div id="usernameMessage" class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" lay-verify="required|confirmPass" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked>
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" name="birthday" id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="file" name="img" class="layui-btn layui-btn-normal">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="captcha" autocomplete="off" placeholder="请输入验证码" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <img src="/hutoolCap" style="width:85px;height: 38px" id="cap"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="registerBtn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var $ = layui.$;
    //Demo
    layui.use(
        'form',
        function () {
            var form = layui.form;
            var laydate = layui.laydate;
            // 校验两次密码是否一致
            form.verify({
                confirmPass: function (value) {
                    if ($('input[name=password]').val() !== value)
                        return '提示：两次输入密码不一致！';
                },
                username: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                },
                password: [
                    /^[\S]{3,12}$/,
                    '密码必须3到12位，且不能出现空格'
                ],
            });
            //日期
            laydate.render({
                elem: '#birthday'
            });
            //监听表单提交
            form.on('submit(registerBtn)', function (data) {
                var formDate = new FormData(document.getElementById("registerForm"));
                $.ajax({
                    url: "/user/register",
                    data: formDate,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        // 注册成功进行页面跳转
                        if (result.code == "1") {
                            window.location = "login.html";
                        } else {
                            // 登录失败给出提示信息
                            layer.alert(result.message, {
                                title: '提示信息'
                            });
                            newCaptcha($("#cap"));
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        // 登录失败给出提示信息
                        layer.alert(result.message, {
                            title: '提示信息'
                        });
                    }
                });
                // 注意，这里要return  false ，取消表单提交的默认行为 （往action对应的url发送请求 ）
                return false;
            });
        }
    );

    function newCaptcha(ele) {
        path = "/hutoolCap?" + new Date().getTime();
        $(ele).attr("src", path);
    }

    $("#cap").click(function () {
        newCaptcha(this)
    });
    $("#username").blur(
        function () {
            $.ajax(
                {
                    url: "/user/checkUsername",
                    data: {
                        username: $(this).val()
                    },
                    type: "post",
                    success: function (resp) {
                        $("#usernameMessage").text(resp.message);
                        if (resp.code != 1) {
                            $("#username").focus();
                        }
                    },
                    error: function (resp) {
                        // 登录失败给出提示信息
                        layer.alert(resp.message, {
                            title: '提示信息'
                        });
                    }
                }
            )
        });
</script>
</html>